﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery属性选择器示例</title>
        <script src="js/jquery-1.12.4.js"></script>
        <style>
            body,ul,li,div,section,header{margin: 0;padding: 0;}
			ul,li{list-style: none;}
			body{
			    font-family: "微软雅黑";
			    font-size: 12px;
			    line-height: 28px;
			}
			#news{
			    border: 1px solid #cccccc;
			    width: 280px;
			    overflow: hidden;
			    margin: 5px auto 0 auto;
			}
			#news header{
			    border-bottom: 1px solid #cccccc;
			    font-size: 16px;
			    line-height: 40px;
			    padding-left:15px;
			    color: #666666;
			    font-weight: bold;
			}
			#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px;}
			#news ul li{padding-left: 10px;}
			#news ul li a{color: #686868; text-decoration: none; display: inline-block;}
			#news ul li a:hover{color: #b02f4a;}
			#news ul li a span{font-size: 13px; font-weight: bold; margin-right: 5px;}
        </style>
    </head>
    <body>
        <h3>jQuery属性选择器示例</h3>
        <hr>
        <section id="news">
		    <header>新闻快报<a href="#" class="more">更多 > </a></header>
		    <ul>
		        <li><a href="sale.news.com/act/h7mf8.html" class="hot">
		        <span>[618]</span>新闻标题1</a></li>
		        <li><a href="www.news.com/news.aspx?id=29257">
		        <span>[公告]</span>新闻标题2</a></li>
		        <li><a href="sale.news.com/act/k2ad45v.html">
		        <span>[特惠]</span>新闻标题3</a></li>
		        <li><a href="www.news.com/news.aspx?id=29252">
		        <span>[公告]</span>新闻标题4</a></li>
		        <li><a href="sale.news.com/act/ugk2937w.html" class="last">
		        <span>[特惠]</span>新闻标题5</a></li>
		    </ul>
		</section>
        <script>
            $(document).ready(function() {
				//$("#news a[class]").css("background","#c9cbcb");  //带有class的属性
				//$("#news a[class='hot']").css("background","#c9cbcb");  //带有class的属性且值为hot
				//$("#news a[class!='hot']").css("background","#c9cbcb");  //class的属性且值不是hot
				//$("#news a[href^='www']").css("background","#c9cbcb");  //href值以www开头
				//$("#news a[href$='html']").css("background","#c9cbcb");  //href值以html结尾
				//$("#news a[href*='k2']").css("background","#c9cbcb");  //href值包含k2
            });
        </script>
    </body>
</html>